/**
 * @author 王晓伟
 * @description 自定义的简单combox,扩展了Ext.form.ComboBox组件。数据以数组的形式交个data属性。数组中第一个下标为实际值,第二个下标为显示值。
 * xtype定义为uxcombox。
 * 
 */

Ext.ux.Combox = Ext.extend(Ext.form.ComboBox,{
	mode:'local',
	triggerAction:'all',
	valueField:'value',
	displayField:'boxLabel',
	editable:false,
	data:new Array(),
	initComponent:function(){
		this.id = this.name;
		this.addEvents(
		/**
		 * 定义一个变化的事件,这个事件的触发条件是一旦combox组件的大小通过拉伸发生变化后就触发这个事件。
		 * _combox（这个组件本身）
		 */
		'chang',
		/**
		 * 定义一个设计状态下选中事件,这个事件的触发条件是一旦combox组件在设计状态下被选中后就触发这个事件
		 * _combox(组件名称)
		 */
		'designSelected'
		);
		Ext.ux.Combox.superclass.initComponent.call(this);
		this.store = new Ext.data.SimpleStore({
			fields:['value','boxLabel','checked'],
			data:this.data,
			autoLoad:true
		});
		/**
		 * 监听渲染完毕事件
		 */
		this.on('render',function(p) {
		        	/**
		        	 * 获取上级父节点，创建拉伸对象，并且如果拉伸动作发生触发chang事件。
		        	 */
		        	var _e =  Ext.get(this.id).findParent('div',null,true);
		        	new Ext.Resizable(_e.id, {
		                handles: 'e',
		                pinned: true,
		                transparent: true,
		                resizeElement: function() {
		                    var box = this.proxy.getBox();
		                    p.updateBox(box);
		                    if (p.layout) {
		                        p.doLayout();
		                    }
		                    p.fireEvent('chang',p);
		                    return box;
		                }
		           });
				   $('#'+this.id).bind('click',{components:this},function(event){
							event.data.components.fireEvent('designSelected',event.data.components);
				   });
				   
				    var index = this.store.find('checked',true);
					var _temp =  this.store.getAt(index).data['value'];
					this.setValue(_temp);
			}
		);
	}
});
Ext.reg('uxcombox',Ext.ux.Combox);